
<template>
  <div class="container">
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.couponState}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
      <swiper-item class="content_item" v-for="(item,index) in tabs" :key="index">
        <div class="coupon">
          <div>
            <span class="coupon_price">{{item.couponPrice}}</span>元
          </div>
          <div class="coupon_info">
            <p>{{item.couponName}}</p>
            <p>{{item.couponRestrict}}</p>
            <p class="coupon_time">有效期：<span>{{item.couponTime}}</span></p>
          </div>
          <div class="coupon_btn">{{item.couponState}}</div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'discounts',
    data () {
      return {
        tabs: [
          {
            couponState: '未使用',
            type: '1',
            checked: true,
            couponPrice: '20',
            couponName: '新用户专享',
            couponRestrict: '满一百元可用',
            couponTime: '2018.10.15'
          },
          {
            couponState: '已使用',
            type: '2',
            checked: true,
            couponPrice: '20',
            couponName: '新用户专享',
            couponRestrict: '满一百元可用',
            couponTime: '2018.10.15'
          },
          {
            couponState: '已失效',
            type: '3',
            checked: true,
            couponPrice: '20',
            couponName: '新用户专享',
            couponRestrict: '满一百元可用',
            couponTime: '2018.10.15'
          }
        ],
        activeIndex: 0,
        currentTab: 0,
        winWidth: 0,
        winHeight: 0
      }
    },
    computed: {
      navbarSliderClass () {
        if (this.activeIndex === 0) {
          return 'navbar_slider_0'
        }
        if (this.activeIndex === 1) {
          return 'navbar_slider_1'
        }
        if (this.activeIndex === 2) {
          return 'navbar_slider_2'
        }
      },
      contentHeight () {
        return this.winHeight + 'rpx'
      }
    },
    methods: {
      tabClick (e) {
        this.activeIndex = e.currentTarget.id
        console.log(e)
        this.currentTab = this.activeIndex
      },
      swiperChange (e) {
        this.currentTab = e.mp.detail.current
        console.log(e)
        this.activeIndex = this.currentTab
      },
      onAnimationfinish () {
        console.log('滑动完成.....')
      }
    },
    onLoad () {
      let res = wx.getSystemInfoSync()
      this.winWidth = res.windowWidth
      this.winHeight = res.windowHeight
    }
  }
</script>
<style scoped>
  .content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 80rpx;
    -webkit-overflow-scrolling: touch;
  }
  .content_item{
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  .navbar {
    display: flex;
    position: fixed;
    z-index: 500;
    top: 0;
    height: 80rpx;
    width: 100%;
    border-bottom: 1rpx solid #ccc;
  }
  .navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13rpx 0;
    text-align: center;
    font-size: 0;
  }
  .navbar_item .navbar_item_on {
    color: #eb493c;
  }
  .navbar_title {
    color: #3b3b3b;
    font-weight: 500;
    display: inline-block;
    font-size: 28rpx;
    max-width: 8em;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .navbar_item_on ::after{
    content: " ";
    width: 60%;
    display: block;
    border-radius: 4rpx;
    height: 4rpx;
    margin: 28rpx auto 0 auto;
    background-color: #eb493c;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
  .navbar_slider_0 {
    left: 29rpx;
    transform: translateX(0);
  }
  .navbar_slider_1 {
    left: 29rpx;
    transform: translateX(250rpx);
  }
  .navbar_slider_2 {
    left: 29rpx;
    transform: translateX(500rpx);
  }
  .coupon{
    width: 606rpx;
    height: 190rpx;
    background: linear-gradient(to right, #ee7376 , #f69189);
    padding: 0 42rpx;
    border-radius: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    color: #feffff;
  }
  .coupon_price{
    font-size: 45rpx;
    padding-right: 5rpx;
  }
  .coupon_info{
    position: relative;
    flex: 1;
    text-align: center;
    height: 120rpx;
    line-height: 44rpx;
  }
  .coupon_time{
    position: absolute;
    bottom: -20rpx;
    font-size: 20rpx;
    text-align: center;
    width: 100%;
  }
  .coupon_btn{
    width: 130rpx;
    line-height: 48rpx;
    background-color: #feffff;
    color: #f38a84;
    text-align: center;
  }
</style>

